<template>
  <div class="box">
    <h1>ref函数的使用</h1>
    <h4>名字（没有响应式）：{{ name }}</h4>
    <!-- ref定义的数据，模板中可以直接使用渲染，不用在value中提取 -->
    <h4>年龄(有响应式)：{{ age }}</h4>
    <h4>对象：{{ user }}</h4>
    <button @click="change">修改数据</button>
  </div>
</template>

<script>
//引入ref
import {ref} from "vue"
export default {
    setup(){
        //1.定义数据,没有响应式，数据变化，视图不变
        let name = "吃饭";

        //3.ref定义响应式数据 -- 基本数据类型，底层通过Object.definedProperty实现响应式
        let age = ref(18);

        //3.ref定义响应式数据 -- 引用数据类型，底层通过reactive函数，而reactive是依靠proxy实现的响应式
        let user = ref({name:"小胡",age:10});

        console.log(name);
        console.log(age);
        console.log(user);

        //4.定义方法，修改数据
        function change(){
            //普通数据，没有响应式的
            name = "不吃了！";

            //修改ref定义的响应式数据 xx.value = 值
            age.value += 1;

            // 修改ref定义的响应式数据 xx.value = 值
            user.value.age += 1;
            console.log("数据修改了",name,age,user);
        }

        //2.return数据在模板中使用
        return {
            name,
            age,
            user,
            change
        }
    }
}
</script>

<style>

</style>